<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- Fig. 9.12: WelcomeServlet2.html -->

<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
   <title>Processing get requests with data</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript">
function sendData(){
	 $('txtoutput').value='';
	var jsonData = $F('text');
	var param = jsonData;
	var url = 'GeoinformaticsService';

	var ajaxRequest = new Ajax.Request(
            url,
        {
            method: 'post',
            //parameters: param,
            postBody: param,
            asynchronous: true,
            //onCreate: loading,
            onSuccess: function(transport){
                    $('txtoutput').value='';
                    $('txtoutput').value=transport.responseText;
                    //$('text').value=transport.responseText;

                    /*var myJSONtext = transport.responseText
                    var myObject = eval('(' + myJSONtext +')');
                    if( myObject.type=="FeatureCollection" || myObject.type=="Feature" ){
                        // This function show lines into map
                        deserialize();
                    }*/
                    
                    //$('text').value='';

            },
            onFailure: function(transport){
                    // Hacer algo en fracaso.
                    alert('Se ha producido un error');
            }
           // onComplete: stopLoading
        });
}
</script>
</head>
<body>
   <form action = "" method = "post">

      <p>
      <label>
         Map request:
      </label><br/>
      <textarea  id = "text" name = "text" cols="50" rows="15" >
{
"determineRouteRequest": {
 "routePlan": {
   "routePreference": "Fastest",
   "useTraffic": true,
   "wayPointList": {
     "startPoint": {
       "position": {
         "type": "Point",
         "coordinates": [-74.05723, 4.71502]
       },
       "nearest": "true"
     },
     "endPoint": {
       "position": {
         "type": "Point",
         "coordinates": [-74.0506, 4.71979]
       },
       "nearest": "true"
     }
   }
 },
 "routeInstructionsRequest": {
   "provideBoundingBox": true,
   "provideGeometry": true,
   "languaje": "ES",
   "format": "plain/text"
 },
 "routeGeometryRequest": {
   "scale": 1000,
   "provideStartingPortion": true,
   "maxPoints": 1000
 }
}
}</textarea>
         <input type = "button" value = "Submit" onClick="sendData();" />
          <textarea name="txtoutput" id="txtoutput" cols="50" rows="15" ></textarea>

      </p>
   </form>
</body>
</html>